<template>
  <div class="mContainer">
    <div class="header-container">
      <span class="header-left-span">换乘方案</span>
      <div class="title-right-container">
          <span v-on:click="clickPlanType()">{{planTypeName}}</span>&nbsp;<img src="../../assets/image/arrow-bottom.png"/>
      </div>

      <div class="mint-popup" v-show="isPopup">
        <span v-on:click="choosePlanType(0)">较&nbsp;&nbsp;快&nbsp;&nbsp;捷</span>
        <span v-on:click="choosePlanType(2)">少&nbsp;&nbsp;换&nbsp;&nbsp;乘</span>
        <span v-on:click="choosePlanType(3)" class="xbx">少&nbsp;&nbsp;步&nbsp;&nbsp;行</span>
      </div>
    </div>

    <div class="area-container">
      <img class="area-toggle" v-on:click="toggleAddress()" src="../../assets/image/toggle-icon.png"/>
      <div class="area">
        <div class="area-top-container">
          <img  class="area-icon" src="../../assets/image/start-point-icon.png"/>
          <span class="area-span">{{queryData.startAddress}}</span>
        </div>

        <div class="area-bottom-container">
          <img class="area-icon" src="../../assets/image/end-point-icon.png"/>
          <span class="area-span">{{queryData.endAddress}}</span>
        </div>
      </div>
    </div>

    <div class="plan-list-container">
      <div class="plan-list-item" v-for="(item,index) in planListData" :key="index" v-on:click="checkDetail(index)">

        <div class="plan-list-left">
          <span class="plan-list-name">{{item.name}}</span>
          <div class="plan-list-line"></div>
        </div>

        <div class="plan-list-center">
          <div class="plan-list-center-item" v-for="(detail,index) in item.trainsit">
            <span v-if="detail.type==8||detail.type==9" class="plan-list-site">{{detail.name}}：{{detail.content}}</span>

            <div v-else-if="detail.type==10||detail.type==11" class="plan-list-site-container">
              <span class="plan-list-plan">{{detail.name}}：</span>
              <span class="plan-list-plan-site">{{detail.content}}</span>
            </div>
          </div>
        </div>

        <img src="../../assets/image/right-arrow-icon.png"/>

      </div>
    </div>

    <!-- 遮罩层 -->
    <div class="mask-body" v-on:click="hiddenDiv()" v-show="isMask"></div>

  </div>
</template>

<script>
  export default {
    data () {
      return {
        queryData: {},
        planListData: {},
        planTypeName: '较快捷',
        isPopup: false,
        isMask: false
      };
    },

    methods: {
      /*
      点击换乘方案类型
       */
      clickPlanType: function () {
        this.isPopup = true;
        this.isMask = true;
      },
      /*
      选择换乘方案类型
       */
      choosePlanType: function (val) {
        if (val === 0) {
          this.planTypeName = '较快捷';
        } else if (val === 2) {
          this.planTypeName = '少换乘';
        } else if (val === 3) {
          this.planTypeName = '少步行';
        }
        this.isMask = false;
        this.isPopup = false;
        this.queryData.strategy = val;
        this.changeData(this.queryData);
      },
      /*
      查询方案列表
       */
      changeData: function (queryData) {
        var vueObj = this;
        this.$utils.indicatorOpen();
        this.$baseService.postData(vueObj.$global.API_POST_PLAN_LIST, queryData, function (response) {
          vueObj.planListData = response;
        });
      },
      /*
      进入方案详情
       */
      checkDetail: function (index) {
        var data = {};
        data.detail = this.planListData[index].detail;
        data.start = this.queryData.startAddress;
        data.end = this.queryData.endAddress;
        data.typeName = this.planListData[index].name;
        this.$storage.setStorage('planDetail', data);
        this.$router.push({ path: '/planDetails' });
      },

      /*
      切换起始点
       */
      toggleAddress: function () {
        var startAddress = this.queryData.startAddress;
        var startLng = this.queryData.startLng;
        var startLat = this.queryData.startLat;
        var startType = this.queryData.startType;

        this.queryData.startAddress = this.queryData.endAddress;
        this.queryData.startLng = this.queryData.endLng;
        this.queryData.startLat = this.queryData.endLat;
        this.queryData.startType = this.queryData.endType;
        this.queryData.endAddress = startAddress;
        this.queryData.endLng = startLng;
        this.queryData.endLat = startLat;
        this.queryData.endType = startType;

        this.changeData(this.queryData);
      },
      /*
      点击遮罩层，隐藏换乘方案类型DIV
       */
      hiddenDiv: function () {
        this.isMask = false;
        this.isPopup = false;
      }
    },

    created () {
      this.$storage.setStorage('startAddress', null);
      this.$storage.setStorage('endAddress', null);
      this.$storage.setStorage('planDetail', {});
      this.$utils.indicatorOpen();
      if (this.$storage.getStorage('searchData')) {
        var data = this.$storage.getStorage('searchData');
        this.queryData = data;
        var vueObj = this;
        this.$baseService.postData(vueObj.$global.API_POST_PLAN_LIST, data, function (response) {
          vueObj.planListData = response;
        });
      }
    },

    destroyed () {

    }
  };
</script>

<style scoped>
  .mContainer{
    display: flex;
    flex-direction: column;
    margin: 0px;
    padding: 0px;
  }

  .title-right-container{
    position: absolute;
    right: 0.4rem;
    margin-top: 0.4rem;
    margin-bottom: 0.4rem;
    color: #fe952c;
    font-size: 0.4rem;
  }

  .title-right-container img{
    width: 0.33rem;
    height: 0.18rem;
    margin-left:0.05rem;
  }

  .mint-popup {
    position: absolute;
    background: #fff;
    top: 1.2rem;
    right: 0.4rem;
    /*-webkit-transform: translate3d(-50%,-50%,0);*/
    transform: translate3d(-50%,-50%,0);
    /*-webkit-backface-visibility: hidden;*/
    backface-visibility: hidden;
    /*-webkit-transition: .2s ease-out;*/
    transition: .2s ease-out;
    z-index: 2005;
    width: 3.2rem;
    border-radius: 6px;
    padding: 0.13rem;
    transform: translate(0%,0);
  }

  /*.mint-popup-1 {*/
    /*width: 150px;*/
    /*border-radius: 0.21rem;*/
    /*padding: 5px;*/
    /*!*-webkit-transform: translate(0%,0);*!*/
    /*transform: translate(0%,0);*/
  /*}*/

  .mint-popup span{
    float: left;
    padding: 0.26rem;
    width: 100%;
    border-bottom: 1px solid #f7f7f7;
    text-align: center;
    font-size: 0.4rem;
  }


  .mint-popup .xbx{
    border-bottom: none;
  }

  .mint-popup:before {
    display: inline-block;
    width: 0;
    height: 0;
    border: solid transparent;
    border-width: 0.26rem;
    border-bottom-color: #fff;
    content: "";
    position: absolute;
    top: -0.53rem;
    right: 0.53rem;
  }

  .mask-body{
    position: fixed;
    top: 0%;
    left: 0%;
    width: 100%;
    height: 100%;
    background-color: #000;
    z-index:2000;
    opacity:.5;
  }


  .plan-list-container{
    background-color: white;
  }

  .plan-list-item{
    display: flex;
    flex-direction: row;
    border-bottom: 1px solid #f7f7f7;
    margin-left: 0.4rem;
  }

  .plan-list-left{
    display: flex;
    flex-direction: row;
  }

  .plan-list-left span{
    margin-right: 0.4rem;
    font-size: 0.37rem;
    color: #666666;
    align-self: center;
  }

  .plan-list-left div{
    margin-top: 0.4rem;
    margin-bottom: 0.4rem;
    width: 1px;
    /*height: 100%;*/
    flex: 1;
    background-color: #f7f7f7;
  }

  .plan-list-item img{
    width: 0.21rem;
    height: 0.37rem;
    align-self: center;
    margin-right: 0.4rem;
  }

  .plan-list-center{
    display: flex;
    flex: 1;
    flex-direction: column;
    margin-left: 0.4rem;
    margin-top: 0.3rem;
    margin-bottom: 0.222rem;
  }

  .plan-list-center-item{
    height: 0.896rem;
    display: flex;
  }

  .plan-list-site{
    align-self: center;
    font-size: 0.37rem;
    color: #333;
  }

  .plan-list-site-container{
    /*margin-top: 0.26rem;*/
    height: 0.896rem;
    display: flex;
  }

  .plan-list-plan{
    font-size: 0.37rem;
    color: #333;
    align-self: center;
  }

  .plan-list-plan-site{
    color: #fe952c;
    font-size: 0.37rem;
    align-self: center;
  }

</style>
